<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div id="app">
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th>序号</th>
						<th>书名</th>
						<th>日期</th>
						<th>单价</th>
						<th>数量</th>
						<th>操作 </th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item of books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>{{item.tdate}}</td>
						<td>{{item.count}}</td>
						<td><button type="button">编辑</button>
							<button type="button" @click="del(item.id)">删除</button>
							<button type="button">添加</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let app = new Vue({
				el: "#app",
				data: {
					books: [{
							id: 1,
							name: 'Java从入门到放弃',
							price: 80,
							tdate: '2020-07-01',
							count: 1,
							account: "hehe"
						},
						{
							id: 2,
							name: 'Vue从入门到放弃',
							price: 90,
							tdate: '2020-07-02',
							count: 1,
							account: "haha"
						},
						{
							id: 3,
							name: 'Mysql从入门到放弃',
							price: 100.01,
							tdate: '2020-07-03',
							count: 1,
							account: "hehe"
						},
						{
							id: 4,
							name: '啥都从入门到放弃',
							price: 70.00,
							tdate: '2020-07-04',
							count: 1,
							account: "haha"
						},
					]
				},
				methods: {
					//要删除
					del(id) {
						for (let i = 0; i < this.books.length; i++) {

							if (this.books[i].id == id) {
								this.books.splice(i, 1);
							}
						}
						localStorage.setItem("books", JSON.stringify(books))
						// for (let index in this.books) {
						// 	let item=this.books[index];
						// 	if (item.id===id) {
						// 		item.remove();
						// 	}
						// }
					}
					//搜索
				}
			});
		</script>
	</body>
</html>
